<template>
  <div >
    
      <el-dialog v-bind="$attrs" v-on="$listeners" title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editClose">
      <el-form
        :model="tempFormResult"
        :label-position="labeoPosition"
        :rules="addFormRules"
        ref="tempFormResultRef"
        label-width="80px"
      >
        <el-row>
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="tempFormResult.username" :disabled="true"></el-input>
                <el-input type="hidden" :disabled="true" v-model="tempFormResult.id" style="display:none"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="departmentId">
              <el-select v-model="tempFormResult.departmentId" placeholder="请选择所属部门">
                <el-option
                  v-for="(item,index) in department"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="tempFormResult.nickname"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="tempFormResult.sex">
                  <el-radio :label="1">帅哥</el-radio>
                  <el-radio :label="0">美女</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="tempFormResult.email"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phoneNumber">
          <el-input v-model="tempFormResult.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item prop="birth" label="生日">
          <el-col :span="11">
            <el-date-picker
              type="date"
              value-format="yyyy年MM月dd日"
              placeholder="选择出生日期"
              v-model="tempFormResult.birth"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button
                  type="primary"
                  @click="updateUser"
                  :loading="btnLoading"
                  :disabled="btnDisabled"
          >确 定</el-button>
      </span>
    </el-dialog>
    
  </div>
</template>
<script>
import {update} from '@/api/users.js'
export default {
  name: "EditUser",
  props:{
     updateVisible:{
       type: Boolean,
       default: false
     },
     department:{
       type: Array,
       default:()=>[]
     },
     userId:{
       type: Number,
       default: 0
     },
     editForm:{
       type: Object,
       default:()=>{}
     }
  },
  data() 
  {
    const checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!value) {
          return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
          if (mailReg.test(value)) {
              callback();
          } else {
              callback(new Error("请输入正确的邮箱格式"));
          }
      }, 100);
    };
    const checkPhone = (rule, value, callback) => {
        const phoneReg = /^1[34578]\d{9}$$/;
        if (!value) {
            return callback(new Error("电话号码不能为空"));
        }
        setTimeout(() => {
            if (!Number.isInteger(+value)) {
                callback(new Error("请输入数字值"));
            } else {
                if (phoneReg.test(value)) {
                    callback();
                } else {
                    callback(new Error("电话号码格式不正确"));
                }
            }
        }, 100);
    };
    return {
        btnLoading: false,
        btnDisabled: false,
        loading: true,                            
        editDialogVisible: false, //修改对话框               
        labeoPosition: "right", //lable对齐方
        tempFormResult: this.editForm,
        addFormRules: {
                    username: [
                        { required: true, message: "请输入用户名", trigger: "blur" },
                        { min: 3, max: 18, message: "长度在 3 到 10 个字符", trigger: "blur" }
                    ],
                    password: [
                        { required: true, message: "请输入密码", trigger: "blur" },
                        { min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" }
                    ],
                    departmentId: [
                        { required: true, message: "请选择部门", trigger: "blur" }
                    ],
                    sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
                    birth: [{ required: true, message: "请填写出生日期", trigger: "blur" }],
                    email: [{ required: true, validator: checkEmail, trigger: "blur" }],
                    phoneNumber: [
                        {
                            required: true,
                            message: "请输入联系方式",
                            validator: checkPhone,
                            trigger: "blur"
                        }
                    ],
                    nickname: [
                        { required: true, message: "请输入昵称", trigger: "blur" },
                        { min: 5, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" }
                    ]
                }, //添加表单验证规则
    };
    
  },
  watch:{
    editForm(){
      this.tempFormResult = this.editForm
      console.log(this.tempFormResult)
    },
    updateVisible(oldVal,newVal){
      console.log(this.updateVisible)
      this.editDialogVisible = this.updateVisible
    }
  },
  methods :{
   
    // choseEditBtn(flag){
    //   this.$emit("choseEditBtn",flag);
    // },
    editClose(){
      this.$emit('changeUpdateShow', false)
      //this.choseEditBtn(false);
    },
    async updateUser(){
      this.$refs.tempFormResultRef.validate(async valid => {
        if(!valid){
          return;
        }else{
          this.btnLoading = true;
          this.btnDisabled = true;
          console.log(this.tempFormResult)
          const {data : res} = await update(this.tempFormResult.id,this.tempFormResult);
          if(res.code == 200){
            this.$notify({
              title: '操作成功',
              message: '用户基本信息已更新',
              type: 'success'
            });
            this.tempFormResult = {};
            
          }else{
            this.$message.error("用户信息更新失败"+res.message);
          }
          //this.editDialogVisible = false;
          this.btnLoading = false;
          this.btnDisabled = false;
        }
      })
    },
    
    
  }
};
</script>

<style lang="less">
</style>